<template>
	<div id="news" >
	<mt-header fixed title="讨论区">
            			<router-link to="/" slot="left">
            				<mt-button icon="back">返回</mt-button>
            			</router-link>
            			<mt-button icon="more" slot="right"></mt-button>
            		</mt-header>
            		<div id="head">
                    			<img src="../../assets/logo3.png" />
                    			<div id="discussionAreaName">递递讨论区</div>
                    		</div>
                    		<div id="In">
		<div class="titleBox">
			<h2>关于学院南门快递区整顿期间有关事项的公告</h2>
            <p>
				<span>2017-03-10</span>
				<span>&nbsp;&nbsp;阅读量： {{doneCount}}</span>
				<span>&nbsp;<mt-button type="primary" @click="mtButtonClick">点赞</mt-button>{{count}}</span>
            </p>
        </div>
        <div class="articleText"><p>为了方便师生寄取快递，保障师生安全，学院在校园占地面积极度紧张的情况下，腾出南门空地并投入建设经费，建成南门快递区，免费提供给各个快递公司使用。运作几年以来,消除了学生在南门外寄取快递过程中存在的交通安全等隐患，也给师生寄取快递提供了便利，得到了师生的好评。但随着进驻快递公司增多及自身业务的发展，也出现了不少问题，有些快递公司由于各种原因将校园内快递业务转包给学院内学生代理，因涉及业务、利益等纠纷，承包学生之间多次发生冲突并相互斗殴，在学院造成了恶劣影响，给学生安全埋下重大隐患。另外，由于承包学生缺乏必要的业务培训，在寄取快递业务过程中导致出现师生向学院投诉等问题，包括反映快递派件人态度恶劣、丢件和私下偷改到付快递费等投诉内容。 
            <p>为了规范校园快递业务，为全院师生营造一个高效、安全、和谐的快递服务环境，经学院研究，决定由学院办公室、学生处、保卫处联合对南门快递区进行整顿并实行统一管理，目的如下：

            <p> 一、规范快递收发件价格，减少中间代理费用，做到价格公开透明，让全院师生享受更实惠的快递价格。
            <p> 在学院快递业务对接整顿期间，可能会给师生造成诸多不便，敬请师生谅解。学院会加快与各快递公司对接进度，保证南门快递区业务尽早恢复正常运行。同时，学院也会在加强与各快递公司沟通联系的基础上进一步加强内部业务管理，对上岗寄取快递业务的勤工助学学生进行统一管理和培训，给师生们提供更规范、更便捷、服务更好的快递服务。
        </div>
        </div>
		<commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content>
        <comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"></comment-textarea>
	</div>
</template>

<script>
import Vue from 'vue'
import { MessageBox } from 'mint-ui';
import { mapGetters } from 'vuex'
import { mapState } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

Vue.component('comment-textarea',{template:'\
	<div class="commentBox">\
		<h3>发表评论(文明用语)</h3>\
		<b v-if="type">你正在回复&nbsp;{{name}}</b>\
		<textarea name="" value="请填写评论内容" v-model="commentText"></textarea>\
		<button class="obtn" @click="addComment">发表</button>\
		<button class="obtn" @click="canelComment">取消</button>\
	</div>',
	props: ['type','name'],
	data: function(){
    	return {
    		commentText:""
    	}
    },
    methods: {
    	addComment: function() {
        	MessageBox.confirm('确定发送此信息?').then(action => {
            	this.$emit("submit",this.commentText);
                this.commentText = "";
                MessageBox('提示', '评论成功');
            });
		},
        canelComment: function() {
        	this.$emit("canel");
            this.commentText = "";
        }
    }
});
Vue.component('commemt-content',{
	template:'\
	<div class="commentBox">\
		<h3>评论</h3>\
		<p v-if="comment.length==0">暂无评论，我来发表第一篇评论！</p>\
		<div>\
			<div class="comment" v-for="(item,index) in comment" v-bind:index="index" >\
				<b>{{item.name}}<span>{{item.time}}</span></b>\
				<p @click="changeCommenter(item.name,index)">{{item.content}}</p>\
				<div v-if="item.reply.length > 0">\
					<div class="reply" v-for="reply in item.reply">\
						<b>{{reply.responder}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{reply.reviewers}}<span>{{reply.time}}</span></b>\
						<p @click="changeCommenter(reply.responder,index)"">{{reply.content}}</p>\
					</div>\
				</div>\
			</div>\
		</div>\
	</div>',
	props: ['comment'],
	methods: {
    	changeCommenter: function(name,index) {
        	this.$emit("change",name,index);
    	}
	}
});

export default {
	name:'comment',
	data (){
    	return{
        	commenter: "游客",   //评论人
            type: 0,             //
            oldComment: null,
            chosedIndex: -1,     //被选中的评论的index
            article: {
            	title: "聆听2016特别报道（一） 这一年，有14个国家很特别",
              	time: "2017-03-26",
              	content: "<p></p>"
            },
            comment: [
            {   name: "Anthony",
              	time: "2017-03-17  12:13",
              	content: "麻烦",
              	reply: [
              	{
              		responder: "B",
              		reviewers: "Anthony",
              		time: "2017-03-25  13:14",
              		content: "你说得对"
              	},
              	{
              		responder: "小黄仁",
              		reviewers: "B",
              		time: "2017-04-05 14:20",
              		content: "叫代拿"
              	}
              	]
            },
            {
              	name: "Shayna",
              	time: "2017-04-10  05:20",
              	content: "。。。。。",
              	reply: []
            }
            ]
        }
    },
    computed:{
  		...mapState({
        	count: state => state.count
        }),
        ...mapGetters({
            doneCount: 'doneTodosCount'
        })
    },
    methods:{
		addComment: function(data) {
			if(this.type == 0) {
				this.comment.push({
					name: '游客',
					time: getTime(),
					content: data,
					reply: []
				});
			}else if(this.type == 1){
				this.comment[this.chosedIndex].reply.push({
					responder: 'Aiqnad',
					reviewers:this.comment[this.chosedIndex].name,
					time: getTime(),
					content: data
				});
				this.type = 0;
			}
		},
		changCommmer: function(name,index) {
			this.oldComment = name;
			this.chosedIndex = index;
			this.type = 1;
		},
		canelCommit: function() {
			this.type = 0;
		},
		...mapMutations([
        	'increment' ,// 映射 this.increment() 为 this.$store.commit('increment'
        ]),
        ...mapActions([
            'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
        ]),
        	mtButtonClick(){
        		this.increment();
            }
    }
}
function  getTime(){
	var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth()+1;
    var day = now.getDate();
    var hour=now.getHours();
    var Minute=now.getMinutes();
    month.length < 2 ?  "0" + month : month;
    day.length < 2 ?  "0" + day : day;
    return year+"-"+month+"-"+day+"     "+hour+":"+Minute;
}
</script>

<style>
#head{
	width:100%;
	height:100px;
	//border:1px solid black;
	background:#1E90FF;
	margin-top:5px;
}

#head img{
	width:100px;
	position:absolute;
	left:10px;

}
#In{
	border:1px solid gray;
		border-radius: 8px;
}
#discussionAreaName{
	width:200px;
	height:50px;
	background:yellow;
	border-radius: 8px;
	position:absolute;
	top:25px;
	right:25px;
	box-shadow:2px 2px 2px #8c8d8d;
    -moz-box-shadow:2px 2px 2px #8c8d8d;
    -webkit-box-shadow:2px 2px 2px #8c8d8d;
	font-size:22px;
	color:white;
	font-weight:bolder;
	line-height:50px;
}

.comment{
   margin-bottom: 10px;
}

#news{
 margin-bottom: 120px;
}

#news  image{
	width:400px;
	height:400px;
}

/*右边大框*/
.articles {
	min-height:100px;
	position:relative;
}

.articles p {
	font-size:1.2em;
}

.titleBox {
	border-bottom:1px solid #ccc;
	margin:10px 10px 0;

}

.titleBox h2 {
	text-align:left;
	color:#000;
}

.titleBox p {
	text-align:right;
	font-size:15px;
	margin:10px 0;
}

.titleBox i {
	margin:0 10px 0 40px;
}

.articleText {
	font-size:16px;
	color:black;
	line-height:22px;
	margin:10px;
}

.articleText p {
	text-indent:2em;
}

.articleText img{
	padding-top:10px;
}

.commentBox {
	margin:5px;
	padding-top:3px;
}

.commentBox h3 {
	color: #fff;
	background: #1E90FF;
	padding: 8px 15px;
	text-align: left;
	font-size: 16px;
}/*评论区分区色*/

.noComment {
	display:none;
}

.comment + .comment, .reply + .reply{
	border-top:1px solid #ccc;
}/*评论区的条纹框*/

.comment b{
	color:#3D3D3D;
	font-size:16px;
	display:block;
	margin:5px 0;
}/*评论区的评论人*/

.comment b span {
	color:#333;
	font-size:10px;
	margin-left:20px;
}/*评论区时间*/

.comment p {
	font-size:13px;
	color:#000;
}

.commentBox textarea {
	overflow: auto;
	width: 100%;
	height: 95px;
	outline: none;
	resize: none;
}

.commentBox button {
	float:right;
	margin-left:20px;
	padding:5px 30px;
	background:#63B8FF;
	border-radius:5px;
	color:#fff;
	font-size:16px;
}

.commentBox button:hover {
	color:#fff;
	background:#1C86EE;
}

.reply {
	margin:15px 0 15px 50px;
}
</style>